export function createModalWithTable() {
    // 如果已存在，先清除
    if (document.getElementById('custom-modal-overlay')) {
        document.getElementById('custom-modal-overlay').remove();
    }

    // 1. 创建遮罩层
    const overlay = document.createElement('div');
    overlay.id = 'custom-modal-overlay';
    Object.assign(overlay.style, {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: '99999',
        fontFamily: 'Arial, sans-serif'
    });

    // 2. 创建弹窗容器
    const modal = document.createElement('div');
    Object.assign(modal.style, {
        backgroundColor: '#fff',
        borderRadius: '8px',
        width: '90%',
        maxWidth: '800px',
        maxHeight: '80vh',
        overflow: 'hidden',
        boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
        display: 'flex',
        flexDirection: 'column'
    });

    // 3. 弹窗头部
    const header = document.createElement('div');
    Object.assign(header.style, {
        padding: '16px 20px',
        backgroundColor: '#1a73e8',
        color: 'white',
        fontSize: '1.25rem',
        fontWeight: 'bold'
    });
    header.textContent = '数据预览';

    // 4. 弹窗主体（表格）
    const body = document.createElement('div');
    body.style.padding = '20px';
    body.style.flex = '1';
    body.style.overflowY = 'auto';

    // 创建表格
    const table = document.createElement('table');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';
    table.style.fontSize = '14px';

    // 表头
    const thead = `
        <thead>
            <tr style="background-color: #f3f3f3;">
                <th style="border: 1px solid #ddd; padding: 10px; text-align: left">编号</th>
                <th style="border: 1px solid #ddd; padding: 10px; text-align: left">姓名</th>
                <th style="border: 1px solid #ddd; padding: 10px; text-align: left">年龄</th>
                <th style="border: 1px solid #ddd; padding: 10px; text-align: left">城市</th>
            </tr>
        </thead>
    `;

    // 表体（可替换为动态数据）
    const tbody = document.createElement('tbody');
    const data = [
        { id: 1, name: '张三', age: 25, city: '北京' },
        { id: 2, name: '李四', age: 30, city: '上海' },
        { id: 3, name: '王五', age: 28, city: '深圳' }
    ];

    data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td style="border: 1px solid #ddd; padding: 10px">${row.id}</td>
            <td style="border: 1px solid #ddd; padding: 10px">${row.name}</td>
            <td style="border: 1px solid #ddd; padding: 10px">${row.age}</td>
            <td style="border: 1px solid #ddd; padding: 10px">${row.city}</td>
        `;
        tbody.appendChild(tr);
    });

    table.innerHTML = thead;
    table.appendChild(tbody);
    body.appendChild(table);

    // 5. 弹窗底部按钮
    const footer = document.createElement('div');
    Object.assign(footer.style, {
        padding: '16px 20px',
        backgroundColor: '#f9f9f9',
        display: 'flex',
        justifyContent: 'flex-end',
        gap: '10px',
        borderTop: '1px solid #ddd'
    });

    const closeButton = document.createElement('button');
    Object.assign(closeButton.style, {
        padding: '8px 16px',
        backgroundColor: '#6c757d',
        color: 'white',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
    });
    closeButton.textContent = '关闭';
    closeButton.onclick = () => overlay.remove();

    const actionButton = document.createElement('button');
    Object.assign(actionButton.style, {
        padding: '8px 16px',
        backgroundColor: '#1a73e8',
        color: 'white',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
    });
    actionButton.textContent = '确认抓取';
    actionButton.onclick = () => {
        alert('开始执行抓取任务！');
        // 这里可以发送消息给 background.js 或执行其他逻辑
        overlay.remove();
    };

    footer.appendChild(closeButton);
    footer.appendChild(actionButton);

    // 6. 组装弹窗
    modal.appendChild(header);
    modal.appendChild(body);
    modal.appendChild(footer);
    overlay.appendChild(modal);

    // 7. 添加到页面
    document.body.appendChild(overlay);

    // 8. 禁止页面滚动
    document.body.style.overflow = 'hidden';
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
            overlay.remove();
            document.body.style.overflow = '';
        }
    });

    // 清理：弹窗关闭后恢复滚动
    closeButton.addEventListener('click', () => {
        document.body.style.overflow = '';
    });
    actionButton.addEventListener('click', () => {
        document.body.style.overflow = '';
    });
}